{% extends 'base.html' %}
{% load static %}
{% block container_option %}
{% endblock %}
{% block card %}
{% endblock %}
{% block content %}
<head>
<title>Editing {{ filename }}</title>
<link rel="stylesheet" href="{% static 'CSS/editor.css' %}" type="text/css" media="screen">
</head>
<body>
    
<button class="btn btn-primary" id="btn-download">Download to File</button>
<a href="/{{ username }}/mechanism/{{ mechanism.id }}">
    <button class="btn btn-primary" id="btn-back">Back to Details</button>
</a>

<div id="editor">
    {{ content }}
</div>

<div id="file-content" style="display: none;"></div>
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js" type="text/javascript" charset="utf-8"></script>
<script
  src="https://code.jquery.com/jquery-3.4.1.slim.js"
  integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
  crossorigin="anonymous"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.setHighlightActiveLine(false);
</script>

<script>
$('#btn-download').click(function(){
    var text = editor.getValue();
    var blob = new Blob([text], {type: "text/plain;charset=utf-8"});
    var fileName = "{{ filename }}";
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
})
</script>
</body>
</html>
{% endblock %}
